.app-motion{
    width: 100%;
    height: 100%;
    background-color: rgba(21, 146, 204, 100);
    padding: 20px;
    .top-nav{
        justify-content: space-between;
        align-items: center;

        .nav-text{
            span{
                color: rgba(170, 217, 247, 100);
            }
            p{
                font-size: 24px;
                color: #fff;
                line-height: 38px;
            }
        }

        .icon-box{
            color: #fff;
            
            .icon-music,.icon-set2{
                font-size: 26px;
                margin-left: 10px;
            }
        }
    }

    .distance-record{
        height: 240px;
        justify-content: center;
        align-items: center;
        color: #fff;

        span{
            font-size: 80px;

        }
    }

    .map{
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        color: #fff;

        span{
            color: rgba(172, 223, 255, 100);
            font-size: 14px;
            position: relative;

            &::after{
                display: inline-block;
                content: '';
                width: 100px;
                height: 1px;
                background-color: rgba(172, 223, 255, 100);
                position: absolute;
                top: 8px;
                right: -114px;
            }
        }

        .icon-mapposition{
            font-size: 40px;
        }
    }

    .icon-list{
        justify-content: space-between;
        align-items: center;
        padding: 15px;

        div{
            justify-content: space-between;
            align-items: center;

            span{
                font-size: 12px;
                color: rgba(172, 223, 255, 100);
                line-height: 22px;
            }
            i{
                font-size: 34px;
                color: #fff;
            }
        }
    }

    .time{
        padding: 10px;
        padding-left: 20px;
        justify-content: space-between;
        font-size: 30px;
        color: #fff;
    }

    .player-end-button{
        justify-content: space-around;

        .player{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(121, 240, 194);
            justify-content: center;
            align-items: center;
            color: #fff;

            i{
                font-size: 26px;
            }
            span{
                font-size: 14px;
                line-height: 20px;
                margin-left: -8px;
            }
        }
        .end{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(255, 96, 96);
            justify-content: center;
            align-items: center;
            color: #fff;

            i{
                font-size: 26px;
            }
            span{
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
}